<!DOCTYPE html>
<html>
<head>
	<title>SoundJS: Basics</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/soundjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>
</head>

<body onload="init()">

<header class="SoundJS">
	<h1>Basics</h1>

	<p>This example registers and plays a sound with SoundJS.</p>
</header>

<div class="content" id="content" style="height: auto">
	<p id="status">Startup.</p>
</div>

<div id="error">
	<h2>Sorry!</h2>

	<p>SoundJS is not currently supported in your browser.</p>

	<p>Please <a href="http://github.com/CreateJS/SoundJS/issues" target="_blank">log a bug</a>
		with the device and browser you are using. Thank you.</p>
</div>

<div id="mobile">
	<h2>Sorry!</h2>

	<p>Mobile devices require sound to be played inside of user events, which
		this demo does not do.</p>

	<p>Please <a href="http://github.com/CreateJS/SoundJS/issues" target="_blank">log a bug</a>
		with the OS and browser if you see this on a device that is not mobile.
		Thank you.</p>
</div>

<script type="text/javascript" src="../lib/soundjs-NEXT.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
 http://code.createjs.com -->

<script id="editable">
	var src;            // the audio src we are trying to play
	var soundInstance;  // the soundInstance returned by Sound when we create or play a src
	var displayStatus;  // the HTML element we use to display messages to the user

	function init() {
		// this does two things, it initializes the default plugins, and if that fails the if statement triggers and we display an error
		if (!createjs.Sound.initializeDefaultPlugins()) {
			document.getElementById("error").style.display = "block";
			document.getElementById("content").style.display = "none";
			return;
		}

		// check if we are on a mobile device, as these currently require us to launch sound inside of a user event
		if (createjs.BrowserDetect.isIOS || createjs.BrowserDetect.isAndroid || createjs.BrowserDetect.isBlackberry) {
			document.getElementById("mobile").style.display = "block";
			document.getElementById("content").style.display = "none";
			return;
		}

		// store the DOM element so we do not have to keep looking it up
		displayStatus = document.getElementById("status");

		// Create a single item to load.
		var assetsPath = "../_assets/audio/";
		src = assetsPath + "M-GameBG.ogg";

		createjs.Sound.alternateExtensions = ["mp3"];	// add other extensions to try loading if the src file extension is not supported
		//createjs.Sound.onLoadComplete = playSound;  // add a callback for when load is completed
		createjs.Sound.addEventListener("fileload", playSound); // add an event listener for when load is completed
		createjs.Sound.registerSound(src);  // register sound, which preloads by default

		displayStatus.innerHTML = "Waiting for load to complete.";  // letting the user know what's happening
	}

	function playSound(event) {
		soundInstance = createjs.Sound.play(event.src);  // start playing the sound we just loaded, storing the playing instance
		displayStatus.innerHTML = "Playing source: " + event.src;  // let the user know what we are playing
	}

</script>

</body>
</html>
